<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title></title>
    <%@include file="/WEB-INF/pages/common/basic-styles.jspf" %>
    <link rel="stylesheet" href="${ctx}/static/js/zTree v3.5.24/css/zTreeStyle/zTreeStyle.css">
    <style>
        ul.ztree {margin-top: 10px;border: 1px solid #617775;background: #f0f6e4;width:220px;height:200px;overflow-y:scroll;overflow-x:auto;}
    </style>
</head>
<body>

    <form:form id="form" method="post" commandName="move" cssClass="form-horizontal" cssStyle="padding-top:20px;">
    			
    	<div class="form-group">
			<label class="col-sm-2 control-label no-padding-right" for="organizationName"> 源节点名称 </label>
			<div class="col-sm-9">	
				<input type="text" id="organizationName" name="organizationName" class="col-xs-10 col-sm-5" value="${source.name}" readonly/>
			</div>	
        </div>
		<div class="space-4"></div>

        <div class="form-group">
            <label class="col-sm-2 control-label no-padding-right" for="targetName"> 目标节点名称 </label>
            <input type="hidden" id="targetId" name="targetId"/>
            <div class="col-sm-9">
				<input type="text" id="targetName" name="targetName" placeholder="Select Organization..." class="col-xs-10 col-sm-5" readonly/>
				<span class="help-inline col-xs-12 col-sm-7">
					<span class="middle"><a id="menuBtn" href="javascript:" style="margin-top: 10px;">选择</a></span>
				</span>
			</div>
        </div>
		<div class="space-4"></div>
		
		<div class="clearfix" style="padding-left: 80px;">
			<div class="col-md-offset-3 col-md-3">
				<button type="button" class="btn btn-sm btn-primary" onclick="move()"><i class="icon-ok bigger-110"></i>移动</button>
				&nbsp; &nbsp; &nbsp;
				<button class="btn btn-sm" type="button" onclick="javascript:history.go(-1);"><i class="icon-off bigger-110"></i>关闭</button>
			</div>
		</div>
    </form:form>

    <div id="menuContent" class="menuContent" style="display:none; position: absolute;">
        <ul id="tree" class="ztree" style="margin-top:0; width:160px;"></ul>
    </div>

	<%@include file="/WEB-INF/pages/common/basic-scripts.jspf" %>
	<script src="${ctx}/static/js/zTree v3.5.24/js/jquery.ztree.all.min.js"></script>
    <script>
        $(function () {
            var setting = {
                view: {
                    dblClickExpand: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    onClick: onClick
                }
            };

            var zNodes =[
                <c:forEach items="${targetList}" var="o">
                { id:${o.id}, pId:${o.parentId}, name:"${o.name}", open:${o.rootNode}},
                </c:forEach>
            ];

            function onClick(e, treeId, treeNode) {
                var zTree = $.fn.zTree.getZTreeObj("tree"),
                        nodes = zTree.getSelectedNodes(),
                        id = "",
                        name = "";
                nodes.sort(function compare(a,b){return a.id-b.id;});
                for (var i=0, l=nodes.length; i<l; i++) {
                    id += nodes[i].id + ",";
                    name += nodes[i].name + ",";
                }
                if (id.length > 0 ) id = id.substring(0, id.length-1);
                if (name.length > 0 ) name = name.substring(0, name.length-1);
                $("#targetId").val(id);
                $("#targetName").val(name);
                hideMenu();
            }

            function showMenu() {
                var cityObj = $("#targetName");
                var cityOffset = $("#targetName").offset();
                $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

                $("body").bind("mousedown", onBodyDown);
            }
            function hideMenu() {
                $("#menuContent").fadeOut("fast");
                $("body").unbind("mousedown", onBodyDown);
            }
            function onBodyDown(event) {
                if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
                    hideMenu();
                }
            }

            $.fn.zTree.init($("#tree"), setting, zNodes);
            $("#menuBtn").click(showMenu);
        });
        
        function move() {
        	var targetId = $("#targetId").val();
        	if (isEmpty(targetId)) {
        		defaultAlert("请选择目标节点");
        		return false;
        	}
        	loading();
        	$("#form").submit();
        }
    </script>
</body>
</html>